<template>
  <div class="selfInfo-content">
    <BackBtn />
    <div class="logout" @click="logout">退出登录<van-icon name="arrow" /></div>
    <div class="card">
      <img src="../images/pic.jpeg" class="pic" />
      <div class="user-form">
        <van-form @submit="onSubmit">
          <van-field
            v-model="allUserInfo.username"
            name="username"
            label="昵称"
            placeholder="昵称不能为空"
            :rules="[{ required: true }]"
            class="item-form"
          />
          <van-field
            v-model="allUserInfo.phone"
            name="phone"
            label="手机"
            type="number"
            placeholder="手机不能为空"
            :rules="[{ required: true }]"
            class="item-form"
          />
          <van-field
            v-model="allUserInfo.password"
            name="password"
            label="密码"
            placeholder="密码不能为空"
            :rules="[{ required: true }]"
            class="item-form"
          />
          <van-field name="gender" label="性别" class="item-form">
            <template #input>
              <van-radio-group v-model="allUserInfo.gender" direction="horizontal">
                <van-radio name="男">男</van-radio>
                <van-radio name="女">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <div class="submit-btn">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { updateUserInfo } from "@/api";
import { mapState } from "vuex";
export default {
  data() {
    return {
    };
  },
  computed: {
    ...mapState('user',['allUserInfo'])
  },
  methods: {
    async onSubmit(values) {
      let id = JSON.parse(localStorage.getItem("userInfo")).id;
      Object.assign(values, { id });
      let res = await updateUserInfo(values);
      if (res.status === 200) {
        Toast("修改成功");
      }
    },
    logout() {
      this.$store.commit("login/clearUserInfo");
      localStorage.removeItem('userInfo');
      this.$router.go(0);
    }
  },
  created() {
    let id = this.$store.state.login.userInfo.id;
    this.$store.dispatch('user/asyncAllSetUserInfo', id);
  }
};
</script>

<style lang="less" scoped>
.selfInfo-content {
  padding: 20px 15px;
  box-sizing: border-box;
  .logout {
    float: right;
    color: #666666;
    font-size: 13px;
  }
  .card {
    width: 100%;
    background-color: #fff;
    margin-top: 30px;
    border-radius: 15px;
    box-shadow: 0 0 2px rgb(0 0 0 / 20%);
    padding: 25px 15px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .pic {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-bottom: 30px;
    }
    .user-form {
      width: 100%;
    }
  }
}
.item-form {
  padding-top: 20px;
  padding-bottom: 20px;
}
.submit-btn {
  position: fixed;
  bottom: 30px;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
}
</style>

<style>
.van-radio__icon--checked .van-icon {
  background-color: #143ea9;
  border: 1px solid #143ea9;
}
.van-button--info {
  background-color: #143ea9;
  border: 1px solid #143ea9;
}
</style>
